import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Image from 'rax-image';
import {
	setStorageSync,
} from '@/utils/util';
import './index.css';

const Guide = (props) => {
  const [step, setStep] = useState(1);
  const [isOpen, setIsOpen] = useState(false);
  return (
    <View
      className={`maskViews ${isOpen ? 'dark' : ''}`}
      catchTouchMove
      onClick={()=>{
        setIsOpen(true)
      }}
    >
      {
        isOpen ? (
          <View className='guide_view'>
            {
              step == 1 ? (
                <Image
                  source={{
                    uri: 'https://jala-test-images.sndaurl.cn/images/step1.png'
                  }}
                  className='guide_view_img'
                  mode='aspectFill'
                  onClick={()=>{setStep(2)}}
                />
              ) : null
            }
            {
              step == 2 ? (
                <Image
                  source={{
                    uri: 'https://jala-test-images.sndaurl.cn/images/step2.png'
                  }}
                  className='guide_view_img'
                  mode='aspectFill'
                  onClick={()=>{setStep(3)}}
                />
              ) : null
            }
            {
              step == 3 ? (
                <Image
                  source={{
                    uri: 'https://jala-test-images.sndaurl.cn/images/step3.png'
                  }}
                  className='guide_view_img'
                  mode='aspectFill'
                  onClick={()=>{
                    setStorageSync('hasGuide', true);
                    props.onClose && props.onClose();
                  }}
                />
              ) : null
            }
            {/* {
              step == 1 ? (
                <View className='guide_view_step1'></View>
              ) : null
            }
            {
              step == 2 ? (
                <View className='guide_view_step2'></View>
              ) : null
            }
            {
              step == 3 ? (
                <View className='guide_view_step3'></View>
              ) : null
            } */}
          </View>
        ) : null
      }
    </View>
  )
}

export default Guide;
